<template>
  <div class="cart" @click="confirm">购物车（{{amount}}）</div>
</template>
<script setup>
import {useGlobal} from "@/stores/useGlobal";
import tool from "@/utils/tool";
import {computed, nextTick, onActivated, ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter()
const props = defineProps({
  buId: {type: [Number, String], default: 0},
  buName: {type: [Number, String], default: ''},
  billId: {type: [Number, String], default: ''},
})
const global = useGlobal()
const show = ref(false)
const cartList = ref([])
const amount = computed(() => {
  return tool.xe.toFixed(tool.xe.sum(cartList.value, 'amount'), 2)
})
onActivated(() => {
  nextTick(() => {
    getCartList()
  })
})
const updateTotal = () => {
  getCartList()
}
const getCartList = () => {
  tool.post('app/getCart',{buId: props.buId}).then(ret => {
    cartList.value = ret.data
  })
}
// 选好了
const confirm = () => {
  show.value = true
  if(cartList.value.length === 0) return tool.err('没有选择商品')
  router.push({name: 'submits', query: {buId: props.buId}})
}

defineExpose({updateTotal})


</script>
<style scoped lang="scss">
.cart {
  background-color: #c45656;
  opacity: 0.7;
  color: white;
  position: fixed;
  bottom: 10px;
  left: 30%;
  border-radius: 6px;
  font-weight: 500;
  font-size: 18px;
  user-select: none;
  padding: 5px 15px;
  &:active {
    background-color: #1e9fff;
  }
}
</style>